{% extends 'KeioStudyBundle::layout.html.twig' %}

{% block content %}
    <h2 style="padding-bottom:20px">Danh sách package</h2>

    <table class="records_list" width="100%">
        <thead>
            <tr>
                <th class="records_list" style="width:7%; text-align:center">STT</th>
                <th class="records_list">Package</th>
                <th class="records_list">Mô tả</th>
                <th class="records_list" style="width:120px">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% set sothutu = 0 %}
        {% for entity in entities %}
        {% set sothutu = sothutu+1 %}
            <tr
        	{% if sothutu is divisibleby(2) %}
        	class="records_list_chan"
	        {% endif %}
	        >
                <td class="records_list" align="center">{{ sothutu }}</td>
                <td class="records_list">{{ entity.name }}</td>
                <td class="records_list">{{ entity.description }}</td>
                <td class="records_list">
                  <table width=100%>
    	            <tr>
	                  <td style="width:33%;">
                	<form action="{{ path('keio_package_delete', { 'id': entity.id }) }}" method="post">
            	        {{ form_widget(entity.delform) }}
        	            <div id="record_list">
	        	            <input title="Delete" type="image" src="{{ asset('icons/delete.png') }}" onclick="return confirm('Chắc chắn xóa không?')" />
        	            </div>
    	            </form>
	                  </td>
                	  <td style="width:33%; padding-left:5px">
            	        <a href="{{ path('keio_package_show', { 'id': entity.id }) }}"><img title="Detail" src="{{ asset('icons/detail.png') }}" /></a>
        	          </td>
        	          <td style="padding-left:5px">
            	        <a href="{{ path('keio_package_edit', { 'id': entity.id }) }}"><img title="Edit" src="{{ asset('icons/edit.png') }}" /></a>
        	          </td>
    	            </tr>
	              </table>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

<div id="dialog-form" title="Tạo package mới">
  <p class="validateTips">Hãy nhập thông tin package</p>
  <form id="frm_add" action="{{ path('keio_package_create') }}" method="post">
  <fieldset>
    <label for="name">Package</label>
    <input type="text" id="name" name="name" />
    <label for="dsc">Mô tả</label>
    <input type="text" id="dsc" name="dsc" />
  </fieldset>
  </form>
</div>

<p style="padding-top:15px">
<button id="create-new">Thêm package</button>
</p>
    {% endblock %}



{% block morejavascripts %}
  <link rel="stylesheet" href="{{ asset('css/modal-form.css') }}" media="screen" type="text/css" />
  <script>
  $(function() {
    var name = $( "#name" ),
      dsc = $( "#dsc" ),
      allFields = $( [] ).add( name ).add( dsc ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Tên của trường \"" + n + "\" phải dài từ " +
          min + " đến " + max + " ký tự." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 330,
      width: 400,
      modal: true,
      buttons: {
        "Thêm package mới": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "Tên package", 3, 55 );
          bValid = bValid && checkLength( dsc, "Mô tả", 3, 500 );

          if ( bValid ) {
            document.getElementById("frm_add").submit();
            $( this ).dialog( "close" );
          }
        },
        Hủy: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

    $( "#create-new" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });
  </script>
{% endblock %}